@import url("../../styles/publicStyle.less");

.error-page-container {
  position: relative;
  .widthAndHeight(100vw, 100vh);
  padding: 60px;
  box-sizing: border-box;

  .content-container {
    .widthAndHeight(100%, 100%);
    text-align: center;
    padding: 60px;
    box-sizing: border-box;
    border-radius: 4px;
    box-shadow: 1px 1px 1px rgba(99, 99, 99, 0.1);
    background-color: @AssistBgWhite;
  }

  .head-line {
    margin-bottom: 40px;

    img {
      margin-top: 100px;
      .widthAndHeight(240px, 240px);
    }
  }

  .subheader {
    font-size: 54px;
    line-height: 74px;
    color: @TitleText;
    transition: color 0.2s linear;
  }

  .hr {
    .widthAndHeight(100%, 2px);
    background-color: @AssistLightGrey;
    margin: 50px auto;
  }

  .context {
    .DetailsText();
    color: @ContentText;
    margin-bottom: 80px;
    transition: color 0.2s linear;
  }

  .buttons-container {
    .btn404 {
      width: 300px;
    }
  }
}

@media screen and (min-width: 400px) {
  .error-page-container {
    .content-container {
      padding: 30px;
    }

    .head-line {
      margin-bottom: 20px;

      img {
        .widthAndHeight(200px, 200px);
        margin-top: 0;
      }
    }

    .hr {
      margin: 30px auto;
    }

    .context {
      margin-bottom: 50px;
    }
  }
}
